<template>
    <div class="friend_share">
        <nav-bar
        :goBack="true"
        :title="topTitle"
        :fatherIsTouch="isTouch"
        @cancelClick="cancelClick"
        @checkClick="checkClick"
        :form="'好友分享'"
        isCalendar
        @onSearch="onSearch"
        @onCancel="onCancel"
        ></nav-bar>
        
        <!-- 面包屑 -->
        <breadcrumb :breadcrumb="breadcrumb"></breadcrumb>

        <!-- 数据列表 -->
        <div class="personal_outer">
            <div class="personal_content" ref="contentBox">
                <van-list
                v-model="loadMore"
                :finished="finished"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onLoadMore"
                offset="1"
                >
                    <van-checkbox-group v-model="checkArr" ref="listCheck" @change="handleListCheckbox" max="1">
                        <data-list
                        :isRightIcon="false"
                        :isFriendShare="true"
                        v-for="(item, index) in listData"
                        :key="index"
                        :fileCategory="item.suffix"
                        :title="item.filestring.value"
                        :label="item.happendTime + ' | ' + item.expiresTime"
                        :friendShareLabel="item.empstring.value"
                        :index="index"
                        :isTouch="isTouch"
                        :menuParameter="menuParameter"
                        v-longtap="() => handleTouch(item, index)"
                        ></data-list>
                    </van-checkbox-group>
                </van-list>
            </div>
        </div>

        <operation-menu isShare isFriendShare v-show="isTouch"></operation-menu>
    </div>
</template>

<script>
import NavBar from 'components/public/NavBar.vue'
import Breadcrumb from 'components/public/Breadcrumb.vue'
import DataList from "components/public/DataList.vue"
import OperationMenu from "components/public/OperationMenu.vue"

export default {
    name: 'FriendShare',
    components: {
        NavBar,
        Breadcrumb,
        DataList,
        OperationMenu
    },
    data(){
        return{
            // 通用变量
            // 顶部标题
            topTitle: this.$route.meta.title,
            // 是否长按标识
            isTouch: false,
            checkArr: [],
            // 我的分享数据列表
            listData: [],
            // 搜索后数据中间变量
            middleware: [],
            // 将文件id和文件类型传给详情组件
            DetailsArr: [],
            // 将id和treeId传给操作菜单组件，用于操作事件
            menuParameter: {},
            // 长按选中的index下标
            activeIndex: 0,
            // 上拉加载
            loadMore: false,
            finished: false,
            PageIndex: 1,
            PageSize: 10,
            total: 0,

            // 面包屑
            breadcrumb: ['分享','好友分享']
        }
    },
    created(){
        this.getFriendListData()
    },
    methods: {
        // 通用事件
        // 列表长按事件
        handleTouch(item, index) {
            console.log("长按了");
            // console.log(item)
            this.activeIndex = index
            this.checkArr.push(index);
            this.isTouch = true;
            // console.log(this.$route)
        },
        // 监听多选按钮点击事件
        handleListCheckbox(arr){
            // console.log(arr)
            // console.log(this.$route)
            this.menuParameter.idArr = arr[0]
            

            // console.log(this.menuParameter)
        },
        // 子组件传的取消事件
        cancelClick(bol) {
            // console.log(bol)
            this.isTouch = bol;
        },
        //
        checkClick(bol) {
            this.$refs.listCheck.toggleAll(bol);
        },
        // 上拉加载
        onLoadMore(){
            if(this.listData.length < this.total){
                this.PageIndex = this.PageIndex + 1
                this.getFriendListData(true)
            }else{
                // 数据全部加载完成
                this.finished = true
            }
        
        },
        // 请求好友分享数据
        getFriendListData(bol){
            this.$request({
                method: 'get',
                url: '/api/Shared/GetSharedMessage',
                params: {
                    Token: sessionStorage.getItem("mobileToken"),
                    Bodystr: '',
                    TimeStart: '',
                    TimeSipt: '',
                    PageIndex: this.PageIndex,
                    PageSize: this.PageSize
                }
            }).then(({data}) => {
                if(data.code == 200){
                    this.total = data.totalCount

                    data.dataList.forEach(item => {
                        let splitCreateTimeArr = item.happendTime.split('T')
                        let splitExpiresTimeArr = item.expiresTime.split('T')
                        item.happendTime = splitCreateTimeArr[0] + ' ' + splitCreateTimeArr[1]
                        item.expiresTime = splitExpiresTimeArr[0] + ' ' + splitExpiresTimeArr[1]

                    })

                    if(bol){
                        this.listData.push(...data.dataList)
                    }else{
                        this.listData = data.dataList
                    }
                }else{
                    this.$notify('加载数据失败，请重试。')
                }

                // 加载状态结束
                this.loadMore = false
            })
        },
        // 搜索提交后展示的数据
        onSearch(list){
            // console.log(list)
            this.middleware = this.listData
            this.listData = list
        },
        // 搜索取消事件
        onCancel(bol){
            if(bol){
                this.PageIndex = 1
                this.PageSize = 10
                this.getFriendListData(false)
                this.finished = false
                if(this.isTouch){
                    this.isTouch = false
                }
            }
        }

    },
    watch: {
        isTouch(newVal){
            if(newVal){
                // this.topTitle = `已选中${this.checkArr.length}项`
            }else{
                this.topTitle = this.$route.meta.title
                // 非长按情况下情况多选款的值
                this.checkArr = []
            }
            // console.log(newVal)
        },
        checkArr(newVal){
            // if(this.isTouch){
            //     this.topTitle = `已选中${this.checkArr.length}项`
            // }
        }
    }
}
</script>

<style lang="less" scoped>

</style>